<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://127.0.0.1:7000/qinyoudao/static/css/free_course_detail.css">
    <script src="http://127.0.0.1:7000/qinyoudao/static/js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <div id="head_line">
        <img src="http://127.0.0.1:7000/qinyoudao/static/images/logo.jpg" id="log"></img>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/index.html">首页</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/free_first.html">免费课</a>
        <a href="">直播课</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_first.html">精品课</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/course.html">我的课程</a>
        <a href="">在线客服</a>
        <a id="search">
            <input type="text" name="yzm" placeholder="搜索课程">
            <button type="btn">搜索</button>
        </a>
        <a href=""></a>
        <a href="">个人中心</a>
    </div>

    <div id="course_detail">
        <div>
            <a href="" id="first_page" >首页</a>

            <span id="lt1">&gt;</span>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_first.html" id="course_class" onmouseover="change_blue('course_class')" onmouseout="ruturn_color('course_class')">精品课</a>
            <span id="lt2">&gt;</span>
            <p id="course_name"></p>
        </div>
        <img src="" alt="" class="img_course" id="cimg">
        <span id="course_title"></span>
        <span id="course_title2"></span>
        <span id="life_time"></span>
        <span id="enroll_num"></span>
        <span id="free"></span>
        <button id="move_text">立即购买</button>
        <ul>
            <li>
                <button class="c1" id="btn1" >课程大纲</button>  
            </li>
            <li>
                <button class="c1" id="btn2">课程简介</button>
            </li>
            <li>
                <button class="c1" id="btn3">课程评价</button>
            </li>
        </ul>
    </div>
    <div id="result1">
        <li class="outline_li" id="out1"></li>
        <br>
        <li class="outline_li" id="out2"></li>
        <br>
        <li class="outline_li" id="out3"></li>
        <br>
        <li class="outline_li" id="out4"></li>
        <br>
        <li class="outline_li" id="out5"></li>
    </div>
    <div id="result2"></div>
    <div id="result3">
        <li class="outline_li" id="_out1"></li>
        <br>
        <li class="outline_li" id="_out2"></li>
        <br>
        <li class="outline_li" id="_out3"></li>
        <br>
        <li class="outline_li" id="_out4"></li>
        <br>
        <li class="outline_li" id="_out5"></li>
        <br>
        <li class="outline_li" id="_out6"></li>
        <br>
        <li class="outline_li" id="_out7"></li>
        <br>
        <li class="outline_li" id="_out8"></li>
        <br>
        <li class="outline_li" id="_out9"></li>
        <br>
        <li class="outline_li" id="_out10"></li>
    </div>
    
<script>
    //打开网页就开始加载数据
    //获取网页头部地址
    var querystring =location.search
    var pstr=querystring.split("=")[1]
    //var username=window.localStorage.dashop_user;
    var username="weiyang";
    console.log(pstr)
    var base_url="http://127.0.0.1:8000/course/p/"+pstr
    window.onload=function(){
        $.ajax({
                url: base_url+"/data",
                type: 'get',
                dataType: "json",
                success: function (res) {
                    if (res.code == 200) {
                        res1=res.data
                        $('#course_name').html(res1["cname"])
                        $('#course_title').html(res1["cname"])
                        $('#course_title2').html(res1["cname"])
                        $('#life_time').html(res1["exp_time"])
                        $('#enroll_num').html(res1["enroll_num"])
                        $('#free').html(res1["price"])
                        $('#cimg').prop("src",res1["src"])
                  
                    }else{
                        alert(res.error)
                    }
                }
            })
    }

//课程大纲
    $("#btn1").on("click", function(){
    $.ajax({
        type: "get",
        url: base_url+"/outline",
        dataType: "json",
        
        success: function(resp){
            $("#result2").hide()
            $("#result3").hide()
            $("#result1").show()
            var cssStyle={
                "border":"1px solid grey",
                "width":"300px",
                "margin-left": "200px",
            }
            resp1=resp.data
            console.log(resp1)
            $(".outline_li").css(cssStyle)
            $("#out1").html(resp1["outline1"]);
            $("#out2").html(resp1["outline2"]);
            $("#out3").html(resp1["outline3"]);
            $("#out4").html(resp1["outline4"]);
            $("#out5").html(resp1["outline5"]);
            /* $("#result").html(resp.content); */
        }
    })
})

// 课程简介
$("#btn2").on("click", function(){
    $.ajax({
        type: "get",
        url: base_url+"/introduce",
        dataType: "json",
        success: function(resp){
            $("#result1").hide()
            $("#result3").hide()
            $("#result2").show()
            var cssStyle={
                "border":"1px solid grey",
                "width":"800px",
                "margin-left": "200px",
            }
            $("#result2").css(cssStyle)
            $("#result2").html(resp.data);
            /* $("#result").html(resp.content); */
        }
    })
})

//评论函数
$("#btn3").on("click", function(){
    $.ajax({
        type: "get",
        url: base_url+"/comment",
        dataType: "json",
        success: function(resp){
            var cssStyle={
                "border":"1px solid grey",
                "width":"800px",
                "margin-left": "200px",
            }
            $(".outline_li").css(cssStyle)
            $("#result1").hide()
            $("#result2").hide()
            $("#result3").show()
            resp1=resp.data
            $("#_out1").html(resp1["comment1"])
            $("#_out2").html(resp1["comment2"])
            $("#_out3").html(resp1["comment3"])
            $("#_out4").html(resp1["comment4"])
            $("#_out5").html(resp1["comment5"])
            $("#_out6").html(resp1["comment6"])
            $("#_out7").html(resp1["comment7"])
            $("#_out8").html(resp1["comment8"])
            $("#_out9").html(resp1["comment9"])
            $("#_out10").html(resp1["comment10"])
        }
    })
})

//立即购买
$("#move_text").on("click", function(){
    $.ajax({
        type: "post",
        url: "http://127.0.0.1:8000/course/pay_course/"+username,
        contentType:'application/json',
        data:JSON.stringify({
            username:username,
            type:1,
            course_id:pstr,
            token:"token"
        }),
        dataType: "json",
        success: function(resp){
            var code=resp.code
            var pay_url=resp.pay_url
            console.log(resp)
            if(code==200){
                window.location = pay_url
            }else{
                alert(resp.error)
            }
        }
    })
})
</script>
</body>
</html>